<template>
  <div id="drawArea">
    <div class="set-s">
      <el-dialog
        :title="titleCon"
        v-model="isUseDialog" 
        draggable 
        :close-on-click-modal="false" 
        :fullscreen="true"
        :before-close="handleClose"
        :destroy-on-close="true"
      >
        <div class="outer-sphere">
          <div class="fun-btn">
            <el-button class="end-draw" @click="saveCurrentRegion">保存区域绘制</el-button>
            <el-button class="end-draw" @click="clearDraw">清除全部绘制</el-button>
            <el-button class="end-draw" @click="returnStep">返回上一步</el-button>
          </div>
          <div class="out-box" ref="outBox">
            <div id="konvaContainer" ref="konvaContainer"></div>
          </div>
        </div>
        <template #footer>
          <el-button @click="cancelUseClick">取消</el-button>
          <el-button type="primary" :loading="repeatDis" @click="submitForm">提交</el-button>
        </template>
      </el-dialog>
    </div>
    <DialogHt 
      :dialogVisible="dialogVisible" 
      @cancelHtClick="cancelHtClick"
      @confirmHtClick="confirmHtClick"
    />
    
  </div>
</template>
<script lang="ts">
import { defineComponent, ref , computed , watch, Ref, nextTick, provide, toRaw, onMounted } from 'vue';
import { ElButton, ElDialog , ElMessage } from 'element-plus';
import DialogHt  from './dialog-ht.vue';
import { SMSDCRiskPartitionDrawAreaChart } from '/@/api/centerControl/sms';
import Konva from 'konva';
declare global {
  interface Window {
    saveImage: () => void;
    copyImageURL: () => void;
    openImageInNewTab: () => void;
    clearNewTab: () => void;
  }
}
export default defineComponent( {
  name: 'drawArea',
  components: {
    DialogHt,
  },
  props: {
      isUseDialog:{
          type: Boolean,
          default: false,
      },
      drawInfo: {
          type: String,
          default: ''
      }
  },
  setup(props,ctx){
      const titleCon = ref();
      const repeatDis = ref(false);
      const dialogVisible = ref(false);
      const container = ref('konvaContainer'); // 获取 DOM 容器
      const outBox:Ref = ref(null);
      const drawnRegions:any = ref([]); // 用于保存绘制区域的数组
      let uploadAreaArr:any = []; // 用户通过拖拽圆点更新区域的数据
      provide('dialogVisible', dialogVisible);

      let bubbleDataArray:any = []; // 保存气泡数据信息
      let savedCircles:any = []; // 用于存储鼠标点击的小圆的信息
      let userPoints:any = []; // 存储用户点击的坐标点
      let outBoxWidth:any; // 设置舞台宽
      let outBoxHeight:any; // 设置舞台高
      let layer:any = new Konva.Layer(); // 创建 Konva 层
      let bubbleLayer = new Konva.Layer(); // 创建气泡层
      let GetBool = false;
      let stage:any;
      let pos:any;
      let bubbleText:any;
      let getX: any = '';
      let getY: any = '';
      let rightCo: any = ''; // 右键坐标

      // isPointInsidePolygon 检查一个点是否在多边形内的辅助函数
      const isPointInsidePolygon = (point:any, polygon:any) => {
        const x = point.x;
        const y = point.y;

        let inside = false;
        for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
          const xi = polygon[i].x;
          const yi = polygon[i].y;
          const xj = polygon[j].x;
          const yj = polygon[j].y;

          const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;

          if (intersect) {
            inside = !inside;
          }
        }
        return inside;
      };

      /*** updateBubbleText 更新气泡文本内容 */
      const updateBubbleText = (bubbleId: any, newText: string) => {
        const bubbleData = bubbleDataArray.find((data: any) => data.id === bubbleId);
        if (bubbleData) {
          bubbleData.text = newText;
          // 将文本内容更新到对应气泡内
          const bubbleText = bubbleData.group.findOne('.bubble-text');
          if (bubbleText) {
            bubbleText.text(newText);
            // 清除 bubbleLayer 中的所有内容
            bubbleLayer.removeChildren();
            anewDrawBubble();
            bubbleLayer.draw();
          }
        }
      };

      /*** anewDrawBubble 重新绘制气泡 */
      const anewDrawBubble = () => {
        if(bubbleDataArray.length !== 0){
          bubbleDataArray.forEach((bubbleData:any) => {
            // 创建一个 Group 来存放气泡的内容
            const bubbleGroup = new Konva.Group({
              x: bubbleData.x, // 设置气泡的 x 坐标
              y: bubbleData.y, // 设置气泡的 y 坐标
              draggable: true, // 设置 Group 可拖拽
            });

            // 创建气泡的背景
            const bubbleBackground = new Konva.Rect({
              width: 150, // 设置气泡的宽度
              height: 50, // 设置气泡的高度
              fill: 'lightblue', // 设置气泡的背景颜色
              cornerRadius: 4, // 设置气泡的圆角半径
            });

            // 创建气泡中的文本
            bubbleText = new Konva.Text({
              text: bubbleData.text, // 设置文本内容
              fontSize: 14, // 设置字体大小
              fill: 'black', // 设置字体颜色
              align: 'center', // 设置文本对齐方式
              width: 150, // 设置文本区域的宽度
              padding: 10, // 设置文本内边距
              name:'bubble-text', // 设置文本名称
            });

            // 计算三角形的位置
            const triangleX = bubbleBackground.width() / 2;
            const triangleY = bubbleBackground.height();

            // 创建三角形
            const triangle = new Konva.RegularPolygon({
              sides: 3, // 三角形的边数
              radius: 10, // 三角形的半径
              fill: 'lightblue', // 三角形的填充颜色，与气泡的背景颜色一致
              x: triangleX, // 使三角形位于气泡的中心
              y: triangleY, // 使三角形位于气泡的下方
              rotation: 180, // 旋转三角形使其倒置
            });

            // 将背景和文本添加到 Group 中
            bubbleGroup.add(bubbleBackground);
            bubbleGroup.add(bubbleText);
            bubbleGroup.add(triangle);

            // 将 Group 添加到舞台
            bubbleLayer.add(bubbleGroup);
            // 将图层添加到舞台
            stage.add(bubbleLayer);
          });
        }
      };

      /*** creatGroup 创建气泡 */
      const creatGroup = (x:any, y:any, txt:any) => {
        // 检查指针是否在绘制的区域内
        const clickedRegionIndex = drawnRegions.value.findIndex((region:any) => {
          return isPointInsidePolygon(rightCo, region.points);
        });
        if (clickedRegionIndex !== -1) {
          const clickedRegionData = drawnRegions.value[clickedRegionIndex];
          const bubbleIndex = bubbleDataArray.findIndex((data:any) => data.index === clickedRegionData.index);
          if(bubbleIndex !== -1){
            updateBubbleText(bubbleDataArray[bubbleIndex].id,txt);
          }else{
            // 创建一个 Group 来存放气泡的内容
            const bubbleGroup = new Konva.Group({
              x: x, // 设置气泡的 x 坐标
              y: y, // 设置气泡的 y 坐标
              draggable: true, // 设置 Group 可拖拽
            });

            // 创建气泡的背景
            const bubbleBackground = new Konva.Rect({
              width: 150, // 设置气泡的宽度
              height: 50, // 设置气泡的高度
              fill: 'lightblue', // 设置气泡的背景颜色
              cornerRadius: 4, // 设置气泡的圆角半径
            });

            // 创建气泡中的文本
            bubbleText = new Konva.Text({
              text: txt, // 设置文本内容
              fontSize: 14, // 设置字体大小
              fill: 'black', // 设置字体颜色
              align: 'center', // 设置文本对齐方式
              width: 150, // 设置文本区域的宽度
              padding: 10, // 设置文本内边距
              name:'bubble-text', // 设置文本名称
            });

            // 计算三角形的位置
            const triangleX = bubbleBackground.width() / 2;
            const triangleY = bubbleBackground.height();

            // 创建三角形
            const triangle = new Konva.RegularPolygon({
              sides: 3, // 三角形的边数
              radius: 10, // 三角形的半径
              fill: 'lightblue', // 三角形的填充颜色，与气泡的背景颜色一致
              x: triangleX, // 使三角形位于气泡的中心
              y: triangleY, // 使三角形位于气泡的下方
              rotation: 180, // 旋转三角形使其倒置
            });

            // 将背景和文本添加到 Group 中
            bubbleGroup.add(bubbleBackground);
            bubbleGroup.add(bubbleText);
            bubbleGroup.add(triangle);

            // 将 Group 添加到舞台
            bubbleLayer.add(bubbleGroup);
            // 将图层添加到舞台
            stage.add(bubbleLayer);
            // 保存气泡数据
            const bubbleData = {
              id: bubbleGroup._id, // 气泡的唯一标识
              x: x,
              y: y,
              text: txt,
              group: bubbleGroup,
              index: clickedRegionData.index,
            };
            bubbleDataArray.push(bubbleData);
            // 在bubbleGroup上拖动的事件监听器
            bubbleGroup.on('dragmove', () => {
              const updatedCoordinates = {
                x: bubbleGroup.x(),
                y: bubbleGroup.y(),
              };

              // 在数组中查找被拖动的气泡索引
              const index = bubbleDataArray.findIndex((data:any) => data.id === bubbleData.id);

              // 更新数组中的坐标
              if (index !== -1) {
                bubbleDataArray[index].x = updatedCoordinates.x;
                bubbleDataArray[index].y = updatedCoordinates.y;
              }
            });
          }
        }else{
          ElMessage({
            type: 'error',
            message: '提示，未找到区域位置，无法配置气泡。',
          })
        }
      };

      /*** handleClose 关闭按钮点击事件 */
      const handleClose = () => {
        cancelUseClick();
      }

      /*** cancelUseClick 取消事件 */
      const cancelUseClick = () => {
          ctx.emit('cancelDrawClick')
      }

      /*** submitForm 提交事件 */
      const submitForm = async() => {
        let param: any = {};
        let setObj: any = {};
        setObj.bubbleDataArray = bubbleDataArray;
        setObj.drawnRegions = drawnRegions.value;
        param.id = JSON.parse(props.drawInfo).id;
        param.v_Coordinates = JSON.stringify(setObj);
        if(drawnRegions.value.length !== bubbleDataArray.length){
          ElMessage({
            type: 'error',
            message: '您有区域为配置气泡内容，请配置',
          })
        }
        repeatDis.value = true;
        let res: any = await SMSDCRiskPartitionDrawAreaChart(param);
        if(res.success){
          repeatDis.value = false;
          ctx.emit('updateData');
          ctx.emit('controlDrawClick');
        }
      }

      /*** 监听isUseDialog的变化 */
      watch(() => props.isUseDialog,(newVal) => {
        if(newVal){
          repeatDis.value = false;
          customFun();
          console.log(JSON.parse(props.drawInfo),'drawInfo')
          if(props.drawInfo !== ''){
            titleCon.value = '绘制区域'
          }else{
            titleCon.value = '绘制区域'
          }
        }
      })

      /*** customFun 自定义函数 */
      const customFun = async() => {
        await nextTick();
        const Timers = setInterval(() => {
          if (outBox.value) {
            outBoxWidth = outBox.value.clientWidth;
            outBoxHeight = outBox.value.clientHeight;
            GetBool = true;
            StageFun();
            clearInterval(Timers);
          }
        },10);
      }

      /*** isUseDialog 响应弹窗的关闭  */
      const isUseDialog = computed(() => {
          return props.isUseDialog
      })

      /*** cancelHtClick 右键功能弹出窗口取消事件 */
      const cancelHtClick = () => {
        dialogVisible.value = false;
      }

      /*** confirmHtClick 右键功能弹出窗口提交事件 */
      const confirmHtClick = (info:any) => {
        dialogVisible.value = false;
        if(info){
          creatGroup(getX, getY, info);
          getX = '';
          getY = '';
        }else{
          ElMessage({
            type: 'error',
            message: '提示，请先输入区域标题。',
          })
        }
      }

      /*** clearDraw 清除全部绘制 */
      const clearDraw = () => {
        savedCircles = []; // 用于存储鼠标点击的小圆的信息
        drawnRegions.value = []; // 用于保存绘制区域的数组
        userPoints = []; // 存储用户点击的坐标点
        layer.removeChildren(); // 清空舞台上的所有图像
        bubbleLayer.removeChildren(); // 清除气泡内容层
        // 重新添加 customShape
        layer.add(customShape);
        // 清除气泡数组
        bubbleDataArray = [];
        // 更新层
        layer.draw();
      };

      /*** returnStep 返回上一步 */
      const returnStep = () => {
        if (userPoints.length !== 0){
          layer.removeChildren(); // 清空舞台上的所有图像
          bubbleLayer.removeChildren(); // 清除气泡内容层
          userPoints.pop();
          savedCircles.pop();
          // 重新添加 customShape
          layer.add(customShape);
          // 重新渲染小圆圈
          drawCirclesOnStage(savedCircles);
          // 重新绘制路径
          anewDraw();
          // 重新绘制气泡
          anewDrawBubble();
          // 更新层
          layer.draw();
        }else{
          ElMessage({
            type: 'error',
            message: '提示，当前无可撤回的路径。',
          })
        }
      };

      /** 绘制单个区域 */
      const drawRegion = (region:any) => {
        const { points, color } = region;
        
        if (Array.isArray(points)) {
          // 创建 Konva 路径
          const path = new Konva.Path({
            data: getPathData(points),
            fill: color,
            stroke: 'red',
            strokeWidth: 0.5,
            name: 'current-region-paths',
          });

          // 将路径添加到层
          layer.add(path);
        }
      };

      /*** anewDraw 重新绘制自定图形 */
      const anewDraw = () => {
        if(drawnRegions.value.length !== 0){
          drawnRegions.value.forEach((points:any) => {
            // 创建 Konva 路径
            drawRegion(points);
          });
        }
      };

      // 创建 Konva 自定义图形
      const customShape = new Konva.Shape({
        sceneFunc: function (context) {
          // 使用 Konva.Context 绘制自定义图形

          // 如果有用户点击的坐标点，绘制多边形
          if (userPoints.length > 0) {
            context.beginPath();
            context.moveTo(userPoints[0].x, userPoints[0].y);

            for (let i = 1; i < userPoints.length; i++) {
              context.lineTo(userPoints[i].x, userPoints[i].y);
            }

            context.closePath();

            // 设置填充颜色
            context.fillStyle = 'rgba(255, 0, 0, 0.5)';
            context.fill();

            // 设置描边颜色和宽度
            context.strokeStyle = 'red';
            context.lineWidth = 0.5;
            context.stroke();
          }
        },
      });

      /*** 重新渲染小圆圈 */
      const drawCirclesOnStage = (savedCircles:any) => {
        // 重新添加小圆圈到图层
        savedCircles.forEach((circleInfo:any) => {
          const circle = new Konva.Circle({
            x: circleInfo.x,
            y: circleInfo.y,
            radius: 4,
            fill: 'rgba(255,255,255,0.5)',
            stroke: 'rgba(255,0,0,0.3)',
            strokeWidth: 0.5,
          });
          // 将小圆圈添加到图层
          layer.add(circle);
        });
      };

      // 添加白色圆形
      const resetCircle = () => {
        let circle;
        if(pos){
          circle = new Konva.Circle({
            x: pos.x,
            y: pos.y,
            radius: 4, // 设置半径，可以根据需要调整
            fill: 'rgba(255,255,255,0.5)',
            stroke: 'rgba(255,0,0,0.3)',
            strokeWidth: 0.5,
          });
        }
        return circle;
      };

      /*** 在画布中绘制保存的所有区域 */
      const drawAllRegions = () => {
        // 清空舞台上的所有图形
        layer.removeChildren();
        bubbleLayer.removeChildren(); // 清除气泡内容层

        // 重新添加 customShape如果不重新添加会出现重新绘制区域的时候能获取到坐标点但是无法重新绘制的区域无法显示在舞台上
        // 原因是做了清空舞台上的所有图形这一步操作
        layer.add(customShape);
        // 遍历历史中的所有区域，并绘制
        drawnRegions.value.forEach((points:any) => {
          // 创建 Konva 路径
          drawRegion(points);
        });
        // 重新绘制气泡
        anewDrawBubble();
        // 更新层
        layer.draw();
      };

      /*** 在点击保存按钮时，将当前用户绘制的区域添加到 drawnRegions 数组中 */
      const saveCurrentRegion = () => {
        if(uploadAreaArr.length !== 0) userPoints = uploadAreaArr;
        if (userPoints.length > 1) {
          // 如果有用户绘制的坐标点，将最后一个点和第一个点连接
          userPoints.push({ x: userPoints[0].x, y: userPoints[0].y });

          // 将用户绘制的坐标点添加到数组
          drawnRegions.value.push({
            points: [...userPoints],
            color: 'rgba(255, 0, 0, 0.5)', // 设置每个区域的颜色
            index: drawnRegions.value.length, // 分配区域的索引
          });

          // 清空当前用户绘制的坐标
          userPoints = [];
          // 清空小圆圈
          savedCircles = [];
          // 清除重绘区域
          uploadAreaArr = [];
          // 绘制保存的所有区域
          drawAllRegions();
        }else{
          ElMessage({
            type: 'error',
            message: '提示，当前未产生新图形的路径绘制，无法完成保存操作，请完成最少3个坐标点的绘制。',
          })
        }
      };

      const getPathData = (points:any) => {
        // 根据坐标点生成 SVG path 数据
        return points.reduce((data:any, point:any, index:any) => {
          const command = index === 0 ? 'M' : 'L';
          return `${data} ${command} ${point.x} ${point.y}`;
        }, '');
      };

      /*** 设置舞台代码 StageFun */
      const StageFun = () => {
        if(GetBool){
          // 创建 Konva 舞台
          stage = new Konva.Stage({
            container: container.value,
            width: outBoxWidth,
            height: outBoxHeight,
          });
          stage.add(layer);

          // 将自定义图形添加到层
          layer.add(customShape);
        
          // 更新层
          layer.draw();
        
          // 监听鼠标点击事件（监听左键点击事件）
          stage.on('click', (e:any) => {
            if (e.evt.button === 0) {
              pos = stage.getPointerPosition();
              let circle = resetCircle();
              // 将圆形添加到图层
              layer.add(circle);
              // 更新图层
              layer.draw();
              // 添加用户点击的坐标点到小圆点数组
              savedCircles.push({ x: pos.x, y: pos.y });
              // 添加用户点击的坐标点到数组
              userPoints.push({ x: pos.x, y: pos.y });
            }
          });

          // 右键调出功能区变量
          let customMenu:any = null;

          // 右键功能区的块
          let liStyle = "cursor: pointer; padding: 5px 0px;margin-bottom: 10px;list-style-type:none;font-size: 14px;border-bottom: 1px solid #CFD3DC";
          let setInner = `<ul style="padding: 10px 15px;margin:5px 0px;">
            <li onclick="saveImage()" style="${liStyle}">重绘区域</li>
            <li onclick="copyImageURL()" style="${liStyle}">配置气泡</li>
            <li onclick="openImageInNewTab()" style="${liStyle}">删除当前区域</li>
            <li onclick="clearNewTab()" style="${liStyle}">关闭菜单</li>
          </ul>`;

          // 功能区样式设置
          let styleSetting = {
            position: 'absolute',
            backgroundColor: 'rgba(0,0,0,0.6)',
            // border: '1px solid rgba(255,255,255,0.3)',
            color: '#FFFFFF',
            padding: '0px',
            borderRadius: '4px',
            zIndex: '9999',
          };

          // 重新绘制当前区域的函数
          const redrawCurrentRegion = (regionIndex: number, points:any) => {
            uploadAreaArr = toRaw(points); // 保存更新区域
            // 移除当前区域的所有路径
            layer.find('.current-region-path').forEach((shape:any) => shape.remove());
            const indexToRemove = drawnRegions.value.findIndex((region:any) => region.index === regionIndex);
            if (indexToRemove !== -1) {
              drawnRegions.value.splice(indexToRemove, 1);
              layer.find('.current-region-paths').forEach((shape:any) => shape.remove());
              drawnRegions.value.forEach((region: any) => {
                const path = new Konva.Path({
                  data: getPathData(region.points),
                  fill: region.color,
                  stroke: 'red',
                  strokeWidth: 0.5,
                  name: 'current-region-paths',
                });
                layer.add(path);
              });
            }

            // 重新绘制路径
            const path = new Konva.Path({
              data: getPathData(points),
              fill: 'rgba(255, 0, 0, 0.5)',
              stroke: 'red',
              strokeWidth: 0.5,
              name: 'current-region-path',
            });

            // 将路径添加到层
            layer.add(path);

            // 更新层
            layer.draw();
          };

          // editArea 右键功能菜单 ‘编辑’
          const editArea = (pointerPosition:any) => {
            // 检查指针是否在绘制的区域内
            const clickedRegionIndex = drawnRegions.value.findIndex((region:any) => {
              return isPointInsidePolygon(pointerPosition, region.points);
            });
            
            // 如果单机的位置在区域的范围内则处理或捕获区域信息
            if (clickedRegionIndex !== -1) {
              const clickedRegionData = drawnRegions.value[clickedRegionIndex];
              // 在被点击的区域上添加拖拽处理逻辑
              clickedRegionData.points.forEach((point:any, pointIndex:any) => {
                const circle:any = new Konva.Circle({
                  x: point.x,
                  y: point.y,
                  radius: 6,
                  fill: 'rgba(255,255,255,0.5)',
                  stroke: 'rgba(255,0,0,0.3)',
                  strokeWidth: 0.7,
                  draggable: true,  // 允许拖拽
                });

                // 监听拖动事件
                circle.on('dragmove', () => {
                  // 更新被拖动点的坐标
                  const updatedCoordinates = {
                    x: circle.x(),
                    y: circle.y(),
                  };

                  // 更新区域坐标
                  clickedRegionData.points[pointIndex] = updatedCoordinates;
                  // 重新绘制当前区域
                  redrawCurrentRegion(clickedRegionData.index, clickedRegionData.points);
                });

                // 鼠标移入圆点创建提示元素
                circle.on('mouseover', () => {
                  const stage = circle.getStage();
                  if (stage) {
                    stage.container().style.cursor = 'pointer';
                    // 创建工具提示元素
                    const tooltip = document.createElement('div');
                    tooltip.className = 'tooltip';
                    tooltip.textContent = '可拖动';
                    tooltip.style.color = '#262727'; // 设置提示字体的颜色
                    tooltip.style.fontWeight = '600'; // 设置提示字体的粗细
                    tooltip.style.fontSize = '14px'; // 设置提示字体的大小

                    // 将工具提示放在圆旁边
                    const containerRect = stage.container().getBoundingClientRect();
                    const circlePosition = circle.getAbsolutePosition();
                    tooltip.style.position = 'absolute';
                    tooltip.style.top = `${circlePosition.y + containerRect.top}px`;
                    tooltip.style.left = `${circlePosition.x + containerRect.left + 10}px`;

                    // 将工具提示追加到鼠标旁边
                    stage.container().appendChild(tooltip);

                    // 设置一个标志来跟踪工具提示是否显示
                    circle.tooltipDisplayed = true;
                  }
                });

                // 鼠标移除圆点清除创建的元素
                circle.on('mouseout', () => {
                  const stage = circle.getStage();
                  if (stage) {
                    stage.container().style.cursor = 'crosshair';
                    if (circle.tooltipDisplayed) {
                      const tooltip = stage.container().querySelector('.tooltip');
                      if (tooltip) {
                        tooltip.remove();
                        circle.tooltipDisplayed = false;
                      }
                    }
                  }
                });

                // 将拖拽点添加到层
                layer.add(circle);
              });
            }
          };

          // clearArea 清除当前区域
          const clearArea = (pointerPosition:any) => {
            // 检查指针是否在绘制的区域内
            const clickedRegionIndex = drawnRegions.value.findIndex((region:any) => {
              return isPointInsidePolygon(pointerPosition, region.points);
            });
            if (clickedRegionIndex !== -1) {
              const clickedRegionData = drawnRegions.value[clickedRegionIndex];
              const indexToRemove = drawnRegions.value.findIndex((region:any) => region.index === clickedRegionData.index);
              if (indexToRemove !== -1) {
                drawnRegions.value.splice(indexToRemove, 1);
                layer.find('.current-region-paths').forEach((shape:any) => shape.remove());
                drawnRegions.value.forEach((region: any) => {
                  const path = new Konva.Path({
                    data: getPathData(region.points),
                    fill: region.color,
                    stroke: 'red',
                    strokeWidth: 0.5,
                    name: 'current-region-paths',
                  });
                  layer.add(path);
                });
              }
            }
          };
          

          // cancelFun 取消功能区函数
          const cancelFun = () => {
            customMenu.parentElement.removeChild(customMenu);
          };

          /*** 监听右键功能区设置 */
          stage.on('contextmenu', function (e:any){
            e.evt.preventDefault(); // 阻止默认右键菜单

            // 移除先前的自定义菜单
            if (customMenu && customMenu.parentElement) {
              cancelFun();
            }

            // 右键获取当前坐标
            const pointerPosition = stage.getPointerPosition();
            rightCo = pointerPosition; // 设置右键坐标
            // const x = pointerPosition.x;
            // const y = pointerPosition.y;
            getX = pointerPosition.x;
            getY = pointerPosition.y;

            // 创建自定义菜单
            customMenu = document.createElement('div');
            customMenu.innerHTML = setInner;
            // 设置菜单样式
            Object.assign(customMenu.style, styleSetting);
            customMenu.style.left = e.evt.clientX + 'px';
            customMenu.style.top = e.evt.clientY + 'px';
            // 将菜单添加到页面
            document.body.appendChild(customMenu);
            // 在自定义菜单中添加相应的事件处理函数
            // 编辑功能
            window.saveImage = ()=>{
              // 实现保编辑的逻辑
              editArea(pointerPosition);
            };

            // 添加气泡
            window.copyImageURL = ()=>{
              // 实现添加气泡的逻辑
              dialogVisible.value = true; // 显示设置文本框
            };

            // 清除当前区域
            window.openImageInNewTab = ()=>{
              // 实现清除路径绘制的逻辑
              clearArea(pointerPosition);
            };

            /*** 取消功能区 */
            window.clearNewTab = () => {
              // 实现取消的逻辑
              if (document.body.contains(customMenu)) {
                cancelFun();
              }
            };

            // 在点击其他地方时，移除自定义菜单
            document.addEventListener('click', function () {
              if (document.body.contains(customMenu)) {
                cancelFun();
              }
            });
            
            // 阻止冒泡，以防止点击菜单时触发 document 的 click 事件
            e.evt.stopPropagation();
          });
        }
      };

      return {
          handleClose,
          submitForm,
          cancelUseClick,
          titleCon,
          isUseDialog,
          repeatDis,
          dialogVisible,
          cancelHtClick,
          confirmHtClick,
          saveCurrentRegion,
          clearDraw,
          returnStep,
          outBox,
          container,
      }
  },
} )
</script>
<style scoped lang="scss">
  .set-s{
    :deep(.el-dialog__body){
      height: calc(100vh - 110px);
      max-height: none!important;
      overflow-y: hidden;
    }
  }
  .outer-sphere{
    display: flex;
    height: 100%;
  }
  .area-span-s{
    width: 150px;
    font-size: 14px;
  }
  // ::deep .el-input__inner{
  //   width: 30%!important;
  //   background-color: rgba(255,255,255,0)!important;
  // }
  /* 可以添加一些样式，例如设置容器的宽度和高度 */
  .out-box{
      width: 100%;
      height: 100%;
      margin-left: 10px;
      background: url('../images/svg.jpg') no-repeat center center;
      background-size: cover;
  }
  .end-draw{
    margin-bottom: 10px;
    margin-left: 0px;
    display: block;
    width: 120px;
  }
  #konvaContainer {
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      cursor: crosshair; /* 鼠标变为十字形，提示用户可以点击绘制 */
  }
</style>